import React from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import { Popconfirm, Space, Dropdown, Menu, Button } from 'antd';
import { ISearchSelector, IToolButton } from '@/base-ui/tool-bar';

const menu = (
  <Menu
    items={[
      {
        key: 0,
        label: <span>详情</span>
      },
      {
        key: 1,
        label: <span>复制</span>
      },
      {
        key: 2,
        label: (
          <Button
            onClick={function () {
              window.print();
            }}
          >
            打印
          </Button>
        )
      }
    ]}
  />
);

/* 搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '仓库id',
    placeholder: '请输入仓库id'
  },
  {
    type: 'input' as Itype,
    label: '用户id',
    placeholder: '请输入用户id'
  },
  {
    type: 'input' as Itype,
    label: '生产批号',
    placeholder: '请输入生产批号'
  },
  {
    type: 'input' as Itype,
    label: '产品名称',
    placeholder: '请输入产品名称'
  },
  {
    type: 'input' as Itype,
    label: '材料名称',
    placeholder: '请输入材料名称'
  },
  {
    type: 'input' as Itype,
    label: '供应商',
    placeholder: '请输入供应商'
  },
  {
    type: 'select' as Itype,
    label: '订单',
    placeholder: '请选择状态',
    options: [
      { label: '未付款', value: 'value1' },
      { label: '已付款', value: 'value2' },
      { label: '退款中', value: 'value3' },
      { label: '已退款', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '件数',
    placeholder: '请选择件数区间',
    options: [
      { label: '1000件以下', value: 'value1' },
      { label: '1000-5000件', value: 'value2' },
      { label: '5000-20000件', value: 'value3' },
      { label: '20000件以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '只数',
    placeholder: '请选择只数区间',
    options: [
      { label: '1000只以下', value: 'value1' },
      { label: '1000-5000只', value: 'value2' },
      { label: '5000-20000只', value: 'value3' },
      { label: '20000只以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '重量',
    placeholder: '请选择重量区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100kg-500kg', value: 'value2' },
      { label: '500kg-1000kg', value: 'value3' },
      { label: '1000kg以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '规格',
    placeholder: '请选择规格区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100kg-500kg', value: 'value2' },
      { label: '500kg-1000kg', value: 'value3' },
      { label: '1000kg以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '单价',
    placeholder: '请选择单价区间',
    options: [
      { label: '1000-5000元', value: 'value1' },
      { label: '5000-20000元', value: 'value2' },
      { label: '20000元-50000元', value: 'value3' },
      { label: '50000以上', value: 'value4' }
    ]
  },
  {
    type: 'input' as Itype,
    label: '收货商',
    placeholder: '请输入收货商'
  },
  {
    type: 'input' as Itype,
    label: '单位',
    placeholder: '请输入单位'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    placeholder: '请输入备注'
  }
];

/* 工具栏区域 */

// 选择器配置
export const SearchSelector: ISearchSelector = {
  Options: [
    { label: '订单编号', value: '1' },
    { label: '商品名称', value: '2' },
    { label: '销售单位', value: '3' }
  ],
  defaultValue: '1',
  id: 8
};
// 按钮组
export const buttonGroup: IToolButton[] = [
  { type: 'import', text: '导入', isShow: true, onClick: () => {}, id: 9 },
  { type: 'export', text: '导出', isShow: true, onClick: () => {}, id: 10 }
];

/* 表格区域 */

// 表格数据
export const FormDataSource: any = [
  {
    key: '0',
    orderId: 2022,
    name: '麻辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '空',
    specification: '1个/包',
    num: '300',
    price: '100',
    remark: '好评如潮',
    action: '',
    tip: '20',
    feet: 30,
    ckbst: 40,
    stick: 50
  },
  {
    key: '1',
    orderId: 2021,
    name: '香辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '空',
    specification: '1个/包',
    num: '100',
    price: '150',
    remark: '多半好评',
    action: '',
    tip: '20',
    feet: 30,
    ckbst: 40,
    stick: 50
  },
  {
    key: '2',
    orderId: 2020,
    name: '不辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '剩余',
    specification: '1个/包',
    num: '200',
    price: '120',
    remark: '褒贬不一',
    action: '',
    tip: '20',
    feet: 30,
    ckbst: 40,
    stick: 50
  },
  {
    key: '3',
    orderId: 2019,
    name: '麻辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '空',
    specification: '1个/包',
    num: '250',
    price: '100',
    remark: '多半差评',
    action: '',
    tip: '20',
    feet: 30,
    ckbst: 40,
    stick: 50
  }
];

export const FormColumns: any = [
  {
    title: '年份',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100
  },
  {
    title: '鸡爪数量',
    dataIndex: 'feet',
    key: 'feet'
  },
  {
    title: '鸡腿数量',
    dataIndex: 'stick',
    key: 'stick'
  },
  {
    title: '鸡胸数量',
    dataIndex: 'ckbst',
    key: 'ckbst'
  },
  {
    title: '鸡尖数量',
    dataIndex: 'tip',
    key: 'tip'
  },
  {
    title: '销售单位',
    dataIndex: 'department',
    key: 'department'
  },

  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '规格',
    dataIndex: 'specification',
    key: 'specification'
  },

  {
    title: '总价(￥)',
    dataIndex: 'price',
    key: 'price',
    sorter: (a: any, b: any) => a.price - b.price
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 150,
    render: (_: any, record: { key: React.Key }) => (
      <Space>
        <a>编辑</a>
        <Popconfirm title="确定删除?" okText="确认" cancelText="取消">
          <a style={{ color: '#ff4d4f' }}>删除</a>
        </Popconfirm>
        <Dropdown overlay={menu}>
          <a onClick={(e) => e.preventDefault()}>···</a>
        </Dropdown>
      </Space>
    ),
    fixed: 'right'
  }
];

//复选框的接口
export interface DataType {
  key: React.Key;
  id: string;
  name: string;
  age: number;
  address: string;
}
